<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习表格</title>
</head>
<style>
    *{margin:0;padding:0;}
    #box{
        width:600px;
        /* height:300px; */
        margin:10px auto;
    }
    .title{
        height:70px;
        border:1px solid;
        padding: 10px 0;
        box-sizing: border-box;
    }
    .search{
        height:40px;
        border:1px solid;
        line-height: 40px;
        padding-left: 20px;
    }
    .table{
        list-style: none;
        width:100%;
        border-collapse: collapse;
    }
    .table tr:nth-of-type(1){
        background: rgb(238, 197, 252);
    }
    td{
        text-align:center;
        padding:5px;
        border:1px solid;
    }
    img{
        height:30px;
        vertical-align: middle;
    }
    .add{
        height:15px;
        width:20px;
    }
    .more{
        padding:5px;
        border:1px solid;
        margin-bottom:10px;
    }
</style>
<body>
    <div id="box">
        <div class="title">
            编号：<input type="text" v-model="bianhao">
            品牌名称：<input type="text" v-model="brand"><br>
            产品图片地址：<input type="text">
            价格：<input type="text" v-model="price">
            <button @click="fn1">添加</button>
        </div>
        <div class="search">
            <input type="text">
            <button>搜索</button>
        </div>
        <table class="table">
            <tr>
                <td><input type="checkbox"></td>
                <td>产品图片</td>
                <td>编号</td>
                <td>品牌名称</td>
                <td>价格</td>
                <td>数量</td>
                <td>操作</td>
            </tr>   
            <tr v-for="(item,index) in arr" :key="item.bianhao">
                <td><input type="checkbox"></td>
                <td>
                    <img :src="item.pic" alt="">
                </td>
                <td>{{item.bianhao}}</td>
                <td>{{item.brand}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button class="add" @click="fn3"> - </button>
                    {{item.count}}
                    <button class="add" @click="fn4"> + </button>
                </td>
                <td><button @click="fn2(index)">删除</button></td>
            </tr>
        </table>
        <div class="more" style="text-align:center" v-show="arr.length===0">没有更多数据了</div>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
        el:"#box",
        data:{
            // msg:"v-for",
            // bianhao:"",
            // brand:"",
            // price:"",
            // count:"",
            arr:[
                {
                pic:"/第一阶段/图片/cute.png",
                bianhao:1,
                brand:"坤坤的背带裤",
                price:"9.9",
                count:"1",
                caozuo:"del"
            },
            {
                pic:"/第一阶段/图片/乱七八糟/星蝶公主.jpg",
                bianhao:2,
                brand:"品如的衣服",
                price:"19.9",
                count:2,
                caozuo:"del"
            }
            ],
        },
        methods: {
            fn1(){    //添加
                console.log(11);
                var obj1 = {
                    pic:this.pic,
                    bianhao:this.bianhao,
                    brand:this.brand,
                    price:this.price,
                }
                this.arr.push(obj1)
            },
            fn2(index){    //删除
                console.log(this);
                this.arr.splice(index,1)
            },
            fn3(){    //-
                console.log(this.arr.count);
                this.arr.count--
            },
            fn4(){    //+
                console.log(this.arr[this.count]);
                this.arr.count++
            }
        }
    })
    
</script>